<template>
  <div class="">
        <el-form  :model="formInline" label-width="135px" class="demo-form-inline">
            <el-form-item label="产品编号"  >
                <span>{{formInline.productNumber}}</span>
            </el-form-item>
            <!-- <el-form-item  label="上架时间">
                <el-date-picker class="w174" v-model="formInline.createTime" type="date" > </el-date-picker>
            </el-form-item> -->
            <el-form-item label="产品一级标签"  >
                <span>{{formInline.firstParentName}}</span>
            </el-form-item>
            <el-form-item label="产品二级标签" >
                <span>{{formInline.parentName}}</span>
            </el-form-item>
            <div></div>
            <el-form-item label="产品资质图片"  >
                <ul class="imglist">
                    <li v-for="(item,j) in zzList">
                        <img :src="httpImgUrl+item">
                        <!-- <p @click="del('zzList',j)">删除</p> -->
                    </li>
                </ul>
            </el-form-item>
            <div></div>
            <el-form-item label="产品主要展示图片"  >
                <ul class="imglist">
                    <li @click="model='mainImg'">
                        <img v-if="mainImg" :src="httpImgUrl+mainImg">
                    </li>
                </ul>
            </el-form-item>
            <div></div>
            <el-form-item label="产品次要图片列表"  >
                <ul class="imglist">
                    <li v-for="(item,j) in productImgList">
                        <img :src="httpImgUrl+item">
                        <!-- <p @click="del('productImgList',j)">删除</p> -->
                    </li>
                </ul>
            </el-form-item>
            <el-form-item label="产品详情">
                <div v-html="formInline.productDiscription" ></div>
            </el-form-item>
            <el-form-item label="产品详情英文"  >
                <div v-html="formInline.productDiscriptionEn"></div>
            </el-form-item>
            <el-form-item label="产品特点"  >
                <div v-html="formInline.productContent"></div>
            </el-form-item>
            <el-form-item label="产品特点英文"  >
                <div v-html="formInline.productContentEn"></div>
            </el-form-item>
            <el-form-item label="正常使用条件"  >
                <div v-html="formInline.productUseConditions"></div>
            </el-form-item>
            <el-form-item label="正常使用条件英文"  >
                <div v-html="formInline.productUseConditionsEn"></div>
            </el-form-item>
            <el-form-item label="订单须知"  >
                <div v-html="formInline.orderingInstructions"></div>
            </el-form-item>
            <el-form-item label="订单须知英文"  >
                <div v-html="formInline.orderingInstructionsEn"></div>
            </el-form-item>
            <el-form-item label="技术参数"  >
                <div v-html="formInline.technicalParameters"></div>
            </el-form-item>
            <el-form-item label="技术参数英文"  >
                <div v-html="formInline.technicalParametersEn"></div>
            </el-form-item>
            <el-form-item label="标准"  >
                <div v-html="formInline.productStandard"></div>
            </el-form-item>
            <el-form-item label="标准英文"  >
                <div v-html="formInline.productStandardEn"></div>
            </el-form-item>
        </el-form>
        <!-- <el-button type="primary w200 mrauto mt20" round @click="save">保存</el-button> -->
  </div>
</template>

<script>
// import ueditor from './ue.vue' //调用编辑器
export default {
  name: 'HelloWorld',
  data () {
    return {
      editorOption: {},
      zzList:[],
      levelOne:[],
      levelTwo:[],
      formInline:{
          parentId:'',
          firstParentId:'',
          productNumber:'',
          productContent:'',
          productContentEn:'',
          productDiscription:'',
          productDiscriptionEn:'',
          productStandard:'',
          productStandardEn:'',
          productUseConditions:'',
          productUseConditionsEn:'',
          technicalParameters:'',
          technicalParametersEn:'',
          orderingInstructions:'',
          orderingInstructionsEn:'',
          parentName:'',
          firstParentName:'',
      },
      model:'zzList',
      mainImg:'',
      productImgList:[]
    }
  },
  methods:{
    //   获取一级标签
      getRows(){
          this.$http.get(this.$store.state.httpApi + 'productFirstDirectory/all').then(response =>{
          if(response.status == 200){
                if(response.data.success){
                    var that=this;
                    response.data.data.forEach(function (ele) {
                        if(that.formInline.firstParentId==ele.id){
                            that.formInline.firstParentName=ele.name;
                        }
                    })
                }       
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
      },
      //   获取二级标签
      getLevelTwo(value){
          this.$http.get(this.$store.state.httpApi + 'productSecondDirectory/all?parentId='+value).then(response =>{
            if(response.status == 200){
                if(response.data.success){ 
                    var that=this;
                    response.data.data.forEach(function (ele) {
                        if(that.formInline.parentId==ele.id){
                            that.formInline.parentName=ele.name;
                        }
                    })
                    
                }       
            }else{
                console.log('接口返回失败!',response);
            }
            },response => {
                console.log('请求失败',response)
          })
      },
    //   获取产品详情
      getDetail(id){
            this.$http.get(this.$store.state.httpApi + 'blProduct/getOne?id='+id).then(response =>{
                if(response.status == 200){
                    if(response.data.success){
                        for(var j in this.formInline){
                            if(response.data.data[j]){
                                this.formInline[j]=response.data.data[j];
                            }
                        }
                        this.mainImg=response.data.data.mainPicture;
                        this.zzList=response.data.data.productAptitude.split(',');
                        this.productImgList=response.data.data.attachPictures.split(',');
                        this.formInline.id=response.data.data.id;
                        this.getRows();
                        this.getLevelTwo(response.data.data.firstParentId);
                        
                    }       
                }else{
                    console.log('接口返回失败!',response);
                }
                },response => {
                    console.log('请求失败',response)
          })
      }
  },
  created(){
      
      if(this.$route.query.id){

          this.getDetail(this.$route.query.id);
      }
  },
  computed: {
    httpApi(){
        return this.$store.state.httpApi
    },
    httpImgUrl(){
        return this.$store.state.httpImgUrl
    },
  },
  components: {
//使用编辑器
  }
}
</script>
<style>
    .upload .el-upload{
        display:block;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .img{
        height:513px;
        width:917px;
        display:block;
        margin-bottom:20px;
    }
    .imglist{
        font-size:0;
    }
    .imglist li{
        width:100px;
        height:100px;
        display:inline-block;
        vertical-align: top;
        margin-right:10px;
        position:relative;
    }
    .imglist li img{
        width:100%;
        height:100%;
    }
    .imglist li p{
        position: absolute;
        background:rgba(255,0,0,0.6);
        color: #fff;
        text-align: center;
        bottom: 0;
        font-size: 14px;
        display: none;
        line-height: 30px;
        cursor: pointer;
        width:100%;
    }
    .imglist li:hover p{
        display: block;
    }
    .upload{
        width:100%;
        height: 100%;
        box-sizing: border-box;
        border:1px solid #D9D9D9;
        font-size: 54px;
        text-align: center;
        // line-height: 200px;
        color: #D2D2D2;
        line-height:100px;
    }
    .upload img{
        width:100%;
        height: 100%;
    }
    
</style>
